• File: custom-003-20250630163726.html
  • Full Path: C:/htdocs/examples/custom-003-20250630163726.html
  • Date Modified: 04/30/2025 7:56 AM
  • File size: 1.25 KB
  • MIME-type: text/html
  • Charset: utf-8
 
Delete Open Edit Advanced Editor Back 
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <style>body {
        padding: 0;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<button onclick="animateGauges()">Animate</button>

<hr>

<canvas data-type="radial-gauge"
        data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
        data-type="radial-gauge"
        data-title="Barometer"
        data-units="mBar"
        data-width="200"
        data-height="200"
        data-value-int="0"
        data-value-dec="0"
        data-width="200"
        data-height="200"
        data-min-value="950"
        data-max-value="1050"
        data-highlights="false"
></canvas>

<script async src="../gauge.min.js"></script>
<script>
    var timers = [];

    function animateGauges() {
        document.gauges.forEach(function(gauge) {
            timers.push(setInterval(function() {
                gauge.value = Math.random() *
                    (gauge.options.maxValue - gauge.options.minValue) +
                    gauge.options.minValue;
            }, gauge.animation.duration + 50));
        });
    }
</script>
</body>
</html>